<template>
	<view class="team">
		<!-- <view class="tabBox">
			<liuyuno-tabs :tabData="tabList" :defaultIndex="tabCurrent" @tabClick="tabChange"></liuyuno-tabs>
		</view>
		 -->
		<view class="contentBox">
			<view class="item" v-for="(item ,index) in teamList" :key="index">
				<view class="topBox flex_space_b">
					<view class="user flex_conter">
						<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
						<text class="name">{{item.j_name}}</text>
					</view>
					<view class="phone">号码：{{item.j_phone}}</view>
				</view>
				<view class="bottomBox flex_space_end">
					<block v-if="item.j_status == 0">
						<button class="btn success" type="default" size="mini" @click="success(item.j_id)">同意</button>
						<button class="btn error" type="default" size="mini" @click="error(item.j_id)">驳回</button>
					</block>
					
					<block v-else-if="item.j_status == 2">
						<button class="btn error" type="default" size="mini">已驳回</button>
					</block>
					
					<view v-else class="flex1 flex_space_b">
						<!-- <view class="num">团队人数：{{item.number}}</view> -->
						<button class="btn look" type="default" size="mini" @click="goAchievement(item.j_user_id,item.j_name)">查看业绩</button>
					</view>
				</view>
			</view>
			<view class="noContent"  v-if="teamList.length <= 0">
				<image class="noContentImage" src="@/static/empty.png" mode="widthFix"></image>
				<view class="text">没有相关记录~</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				teamList:[],
				tabList: [],
				tabCurrent: 0,
				is_open : 0,
				click_j_parent_admin_user:0
			}
		},
		onLoad(e) {
			// 当前选择的校区代理
			if(uni.getStorageSync('click_j_parent_admin_user') && uni.getStorageSync('click_j_parent_admin_user') != 0){
				this.click_j_parent_admin_user = uni.getStorageSync('click_j_parent_admin_user')
			}
			this.is_open = e.is_open;
			if(this.is_open == 1){
				this.tabList = [{
					name: '二级'
				}, {
					name: '三级'
				}];
			}else{
				this.tabList = [{
					name: '三级'
				}];
			}
			this.team(0);
		},
		methods: {
			tabChange (index) {
				this.tabCurrent = index;
				this.team(0);
			},
			team(id,type){
				util.requestPost('user/team', {j_id:id,type:type,tabCurrent:this.tabList[this.tabCurrent].name,j_parent_admin_user:this.click_j_parent_admin_user}, (res) => {
					if (res.code == 1) {
						console.log(res);
						if(id && id != ''){
							 this.$toast(res.msg)
							 setTimeout(() => {
								this.team(0);
							 }, 500);
						}else{
							this.teamList = res.data.list;
						} 
					} else {
						 this.$toast(res.msg)
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			success (j_id) {
				let that = this;
				uni.showModal({
					content: '确认同意该用户成为校园经理？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.team(j_id,1)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			error (j_id) {
				let that = this;
				uni.showModal({
					content: '确认驳回该用户的申请吗？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.team(j_id,2)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			goAchievement (id,j_name) {
				console.log(j_name);
				uni.navigateTo({
					url: `/pages/my/achievement?id=${id}&j_name=${j_name}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.team {
	.tabBox {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 100;
		width: 750rpx;
		background-color: #FFFFFF;
	}
	.contentBox {
		padding: 28rpx;
	}
	.item {
		box-shadow: 0 0 8rpx rgba($color: #000000, $alpha: 0.2);
		border-radius: 20rpx;
		&:not(:last-of-type) {
			margin-bottom: 20rpx;
		}
		.topBox {
			padding: 32rpx 20rpx;
			font-size: 28rpx;
			font-weight: bold;
			.avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
			.name {
				margin-left: 12rpx;
			}
		}
		.bottomBox {
			padding: 20rpx;
			border-top: $border-base;
			.num {
				font-size: 28rpx;
			}
			.btn {
				margin: 0;
				color: #FFFFFF;
				font-size: 24rpx;
				border-radius: 40rpx;
				&::after {
					border: none;
				}
				&:not(:last-of-type) {
					margin-right: 20rpx;
				}
				&.success {
					background-color: $primary-color;
				}
				&.error {
					background-color: $red-color;
				}
				&.look {
					background-color: $weinxinColor;
				}
			}
		}
	}
}
</style>
